<template>
	<view class="my">
		<view class="my-top-msg">
			<u-avatar :src="src" mode="square" size="large" class="my-msg-avatar" @click="handlePreViewAvatar(src)"></u-avatar>
			<view class="my-msg-detail">
				<view class="my-msg-detail-name">Yuki</view>
				<view class="my-msg-detail-phone">手机号：185xxxxxxxx</view>
			</view>
		</view>
		<y-cell-item v-for='(item,index) in list' :key='index' :imgSrc='item.src' :style="{'margin-bottom':index===0?'20rpx':'0','margin-top':index===list.length-1?'20rpx':'0'}"
		 :title='item.title' class='cell-item' @click="goTo(item.url)"></y-cell-item>
	</view>
</template>

<script>
	/**
	 *YCellItem:封装的组件  是模仿的微信中 我的 页面中的cell组件  属性说明：
	 * title: cell的标题 string/number类型 
	 * value:cell的详情 string/number类型
	 * icon:cell左侧的icon 参考
	 * imgSrc:cell左侧的图片，优先级大于icon属性
	 * @click 点击的方法
	 * 自定义title slot='title'
	 * 自定义value slot='value'
	 */
	export default {
		data() {
			return {
				src: '/static/img/movable/3.jpg',
				list: [{
					title: '支付',
					src: '/static/my/pay.png',
					url: '/pages/tabbar/my/payment/index'
				}, {
					title: '收藏',
					src: '/static/my/shoucang.png'
				}, {
					title: '表情',
					src: '/static/my/biaoqing.png'
				}, {
					title: '卡包',
					src: '/static/my/kabao.png'
				}, {
					title: '设置',
					src: '/static/my/shezhi.png',
					url: '/pages/tabbar/my/setting/index'
				}]
			}
		},
		methods: {
			handlePreViewAvatar(src) {
				uni.previewImage({
					current: 1,
					urls: [src],
					success(res) {
						console.log(res)
					}
				})
			},
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url
					})
				} else {
					uni.showToast({
						title: '暂未制作相关功能...',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.my {
		height: 100vh;
		background-color: #ededed;

		.my-top-msg {
			width: 100%;
			height: 400rpx;
			background-color: #fff;
			display: flex;
			align-items: flex-end;
			padding-bottom: 100rpx;
			margin-bottom: 20rpx;

			.my-msg-avatar {
				margin: 0 40rpx;
			}

			.my-msg-detail {

				.my-msg-detail-name {
					font-size: 38rpx;
					font-weight: 600;
					color: #383838;
				}

				.my-msg-detail-phone {
					color: #959595;
					line-height: 70rpx;
				}
			}
		}
	}
</style>
